import './index.less'
import classNames from 'classnames'
import { Modal } from 'antd'
import type { ModalProps } from 'antd'
import JButton from '@/components/JButton'

interface IModalProps extends ModalProps {
  /**
   * class名
   * @type {string}
   * @required 非必填
   */
  className?: string
  /**
   * 宽度
   * @type {string | number}
   * @required 非必填
   * @default-{200}
   */
  width?: string | number
  /**
   * 对话框是否可见
   * @type {boolean}
   * @required 非必填
   */
  visible?: boolean
  /**
   * 标题
   * @type {ReactNode}
   * @required 非必填
   */
  title?: React.ReactNode
  /**
   * 加载
   * @type {number | boolean}
   * @required 非必填
   */
  loading?: number | boolean
  /**
   * 是否显示footer按钮
   * @type {boolean}
   * @required 非必填
   * @default-false
   */
  isShowFooter?: boolean
  /**
   * 是否隐藏取消按钮
   * @type {boolean}
   * @required 非必填
   * @default-false
   */
  isHiddenCancelBtn?: boolean
  /**
   * 取消按钮文字
   * @type {ReactNode}
   * @required 非必填
   * @default-{取消}
   */
  cancelText?: React.ReactNode
  /**
   * 确认按钮文字
   * @type {ReactNode}
   * @required 非必填
   * @default-{确定}
   */
  okText?: React.ReactNode
  /**
   * 取消回调
   * @type {Function}
   * @required 非必填
   */
  onCancel?: () => void
  /**
   * 确定回调
   * @type {Function}
   * @required 非必填
   */
  onOk?: () => void
  children?: React.ReactNode
}

const JModal = (props: IModalProps) => {
  const {
    className,
    width = 200,
    visible,
    title,
    loading,
    isShowFooter,
    isHiddenCancelBtn,
    cancelText = '取消',
    okText = '确定',
    onCancel,
    onOk,
    children,
    ...restProps
  } = props

  return (
    <Modal
      className={classNames('J-modal', className)}
      title=''
      centered
      visible={visible}
      width={width}
      {...restProps}
      closable={false}
      footer={null}
      onCancel={onCancel}
    >
      <div className='J-modal-body'>
        {title && (
          <div className='J-modal-header'>
            <div className='J-modal-title'>{title}</div>
          </div>
        )}

        <div onClick={onCancel} className={classNames('J-modal-close-btn btn-touch')}></div>
        <div className='J-modal-container'>{children}</div>
        {isShowFooter && (
          <div className='J-modal-footer'>
            {!isHiddenCancelBtn && (
              <JButton loading={loading} onClick={onCancel}>
                {cancelText}
              </JButton>
            )}
            <JButton type='primary' loading={loading} onClick={onOk}>
              {okText}
            </JButton>
          </div>
        )}
      </div>
    </Modal>
  )
}

export default JModal
